<template>
  <div>
    <el-button type="primary" @click="addDialog=true"><i class="el-icon-plus"></i> 增加</el-button>
        <el-dialog title="增加资源" :visible.sync="addDialog" append-to-body>
            <el-form :model="form" :rules="rules">
                <el-form-item label="资源名称" :label-width="formLabelWidth" prop="name">
                <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="URL" :label-width="formLabelWidth" prop="url">
                <el-input v-model="form.url" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="API" :label-width="formLabelWidth" prop="api">
                <el-input v-model="form.api" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="资源编号" :label-width="formLabelWidth" prop="number">
                <el-input v-model="form.number" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="备注" :label-width="formLabelWidth">
                <el-input v-model="form.remark" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="顺序编号" :label-width="formLabelWidth" prop="order">
                <el-input v-model="form.order" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="打开图标" :label-width="formLabelWidth" prop="openIcon">
                    <el-select v-model="form.selectedIcon" placeholder="请选择图标">
                        <el-option
                            v-for="icon in iconList"
                            :key="icon"
                            :label="icon"
                            :value="icon">
                            <template #default>
                                <i :class="['el-icon', icon]"></i>
                            </template>
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="关闭图标" :label-width="formLabelWidth" prop="closeIcon">
                    <el-select v-model="form.selectedIcon" placeholder="请选择图标">
                        <el-option
                            v-for="icon in iconList"
                            :key="icon"
                            :label="icon"
                            :value="icon">
                            <template #default>
                                <i :class="['el-icon', icon]"></i>
                            </template>
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="子系统" :label-width="formLabelWidth" prop="childNode">
                    <el-select v-model="form.selectedIcon" placeholder="请选择">
                        <el-option
                            v-for="item in subSystemTable"
                            :key="item"
                            :label="item"
                            :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="父亲节点" :label-width="formLabelWidth" prop="fatherNode">
                    <el-select v-model="form.selectedIcon" placeholder="请选择">
                        <el-option
                            v-for="item in fatherNodeTable"
                            :key="item"
                            :label="item"
                            :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否是叶子结点" label-width="200px" prop="isLeaf">
                    <el-radio-group v-model="form.isLeaf">
                        <el-radio label="是"></el-radio>
                        <el-radio label="否"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="资源类型" label-width="200px" prop="resourceType">
                    <el-radio-group v-model="form.resourceType">
                        <el-radio label="菜单"></el-radio>
                        <el-radio label="按钮"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="是否隐藏" label-width="200px" prop="isHide">
                    <el-radio-group v-model="form.isHide">
                        <el-radio label="是"></el-radio>
                        <el-radio label="否"></el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
            </div>
        </el-dialog>
  </div>
</template>

<script>
export default {
    name:"addResource",
    data() {
        return{
            addDialog:false,
            form: {
                name:"hhh",
                order:1,
                number:12,
                fatherNode:"hhh",
                childNode:"hhh",
                url:"././ResourceIndex.vue",
                api:"/messages",
                type:"菜单",
                openIcon:"el-icon-open",
                closeIcon:"el-icon-turn-off",
                isLeaf:'1',
                resourceType:'1',
                isHide:'1',
            },
            formLabelWidth: '120px',
            iconList: ['el-icon-edit', 'el-icon-document', 'el-icon-date', 'el-icon-search'], 
            rules: {
                name: [
                    { required:true, message:'子系统名不能为空！',trigger: 'blur' },
                ],
                order: [
                    { required:true, message:'子系统代码不能为空！',trigger: 'blur' },
                ],
                number: [
                    { required:true, message:'子系统链接不能为空！',trigger: 'blur' },
                ],
                url: [
                    { required:true, message:'子系统链接不能为空！',trigger: 'blur' },
                ],
                api: [
                    { required:true, message:'子系统链接不能为空！',trigger: 'blur' },
                ],
                openIcon: [
                    { required:true, message:'子系统链接不能为空！',trigger: 'blur' },
                ],
                closeIcon: [
                    { required:true, message:'子系统链接不能为空！',trigger: 'blur' },
                ],
                fatherNode: [
                    { required:true, message:'子系统链接不能为空！',trigger: 'blur' },
                ],
                childNode: [
                    { required:true, message:'子系统链接不能为空！',trigger: 'blur' },
                ],
                isLeaf: [
                    { required:true, message:'子系统链接不能为空！',trigger: 'blur' },
                ],
                resourceType: [
                    { required:true, message:'子系统链接不能为空！',trigger: 'blur' },
                ],
                isHide: [
                    { required:true, message:'子系统链接不能为空！',trigger: 'blur' },
                ]
            },
        }
    }
}
</script>

<style>

</style>